<template>
	<view class="content">
		<view class="tabs" :style="'padding-top:'+barHeight+'px'">
			<view class="tab" @click="gotabber()">
				同城任务
			</view>
			<view class="tab a">
				悬赏任务
			</view>
		</view>
		<view class="header">
			<!-- <view class="l">悬赏大厅</view> -->
			<view class="headBox">
				<view class="subBox">
					<view class="sub active">悬赏大厅</view>
					<!-- #ifdef APP -->
					<view class="sub" @click="authTo('pages/third/xianwan')">游戏赚钱</view>
					<view class="sub" @click="authTo('pages/third/task')">全网任务</view>
					<!-- #endif -->
				</view>
				<view class="searchBox">

					<view class="r" @click="search()">
						<u-icon name="search"></u-icon>
						<view class="word">输入搜索信息</view>
						<view class="btn">搜索</view>
					</view>
				</view>
			</view>
			<view class="swiperBox">
				<u-swiper :list="info" :radius="10" height="327rpx" keyName="image" @click="thumbinfo"></u-swiper>
			</view>

		</view>
		<view class="selectBox">
			<view class="select" @click="select(1)" :class="{active: type === 1}">{{cate}}
				<u-icon size="12" color="#DCDCDC" style="margin-left: 10rpx;" name="arrow-down-fill"></u-icon>
			</view>
			<!-- <view class="select" @click="select(1)" :class="{active: type === 1}">最新</view> -->
			<view class="select" @click="select(2)" :class="{active: type === 2}">简单 </view>
			<view class="select" @click="select(3)" :class="{active: type === 3}">高佣金</view>
		</view>
		<scroll-view scroll-y="true" class="main" @scrolltolower="lower()">
			<view class="list" v-for="(item,index) of list" :key="index" @click="detail(item.id)">
				<image :src="oss(item.avatar)" class="cover" mode=""></image>
				<view class="info">
					<view class="title">
						<view class="l">{{item.name}}</view>
					</view>
					<view class="types">
						<view class="btn">{{item.catename}}</view>
						<view class="btn btn1">{{item.platform}}</view>
					</view>
					<view class="numBox">
						<u-line-progress :percentage="item.acceptnum/item.num" height="4" :showText="false"
							activeColor="#FFC141">
						</u-line-progress>
						<view class="num"><text class="word">{{item.acceptnum}}</text>/{{item.num}}</view>
					</view>
				</view>
				<view class="moeny">佣金{{item.price}}元</view>
				<view class="vip" v-if="item.istop > 0">
					<image src="../../static/serve/vip.png" mode="" class="icon"></image>
					<view class="word">置顶</view>
				</view>
			</view>
			<u-empty v-if="finish && list.length === 0" :marginTop="200">
			</u-empty>
			<u-picker :show="show" :columns="cateList" @confirm="confirm" @close="show = false" @cancel="show = false"
				keyName="name"></u-picker>
		</scroll-view>
		<tabbar :current="current"></tabbar>
		<image src="../../static/add.png" class="add" mode="" @click="authTo('pages/my/task/publish')"></image>

	</view>
</template>

<script>
	import tabbar from "../../components/tabbar/tabbar.vue"
	import amap from '../../common/amap-wx.130.js';
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				current: 2,
				barHeight: '20',
				info: '',
				longitude: '',
				latitude: '',
				hotList: [],
				items: [],
				cate_id: '',
				cate: '全部分类',
				page: 1,
				finish: false,
				list: [],
				type: 1,
				cateList: [],
				show: false,
				equiptype: 0,
				city: '',
				second: false,
				sweixin: ''
			}
		},
		onLoad() {
			this.barHeight = uni.getSystemInfoSync().statusBarHeight
			console.log(uni.getSystemInfoSync().platform)
			this.equiptype = uni.getSystemInfoSync().platform == 'ios' ? 2 : 1
			this.getConfig()
			let that = this
			uni.showLoading({
				title: '获取信息中'
			});
			let amapPlugin = new amap.AMapWX({
				key: 'fdca19ddc2301158a38cfda641e37a08'
			});
			amapPlugin.getRegeo({
				success: (data) => {
					console.log(data)
					that.longitude = data[0].longitude
					that.latitude = data[0].latitude
					that.city = data[0].regeocodeData.addressComponent.city
					uni.hideLoading();
					that.getList()
				}
			});
			that.getType()

			// #ifdef APP-PLUS
			console.log("plus");
			plus.share.getServices(function(s) {
				console.log(s)
				var shares = {};
				for (var i = 0; i < s.length; i++) {
					var t = s[i];
					console.log(t);
					shares[t.id] = t;
					console.log(t.id);
				}

				var sweixin = shares['weixin'];
				console.log(sweixin)
				that.sweixin = sweixin

			}, function(e) {
				console.log("获取分享服务列表失败：" + e.message);
			});
			//#endif
		},
		onShow() {
			if (this.second) {
				this.reload()
			}
		},
		methods: {
			gotabber() {
				uni.switchTab({
					url: '/pages/index/indexa'
				})
			},
			thumbinfo(index) {
				if (this.info[index].url_type == 0) {
					uni.$u.route({
						url: 'pages/common/article',
						params: {
							id: this.info[index].id
						}
					})
				} else if (this.info[index].url_type == 1) {
					this.goto(`pages/common/webview?url=${encodeURIComponent(this.info[index].url)}`)
				} else if (this.info[index].url_type == 2) {
					// #ifdef MP-WEIXIN
					uni.navigateToMiniProgram({
						appId: this.info[index].url
					})
					// #endif
				} else if (this.info[index].url_type == 3) {

					var n = this;
					//#ifdef APP-PLUS  

					n.sweixin ? n.sweixin.launchMiniProgram({
						id: this.info[index].url
					}) : plus.nativeUI.alert('当前环境不支持微信操作!');
					//#endif
				}

			},
			search() {
				uni.$u.route({
					url: 'pages/common/search',
					params: {
						type: 1
					}
				})
			},
			detail(id) {
				uni.$u.route({
					url: 'pages/task/detail?id=' + id
				})
			},
			confirm(e) {
				console.log(e)
				this.type = 1
				this.cate_id = e.value[0].id
				this.cate = e.value[0].name
				this.show = false
				this.reload()
			},
			select(type) {

				if (type === 1) {
					this.show = true
				} else {
					this.type = type
					if (type === 2) {
						this.price_sort = 0
					} else {
						this.price_sort = ''
					}
					if (type === 3) {
						this.juli_sort = 1
					} else {
						this.juli_sort = ''
					}
					this.reload()
				}

			},
			lower() {
				this.page++
				this.getList()
			},
			selectHot(item) {
				this.cate_id = item.id
				this.cate = item.name
				this.reload()
			},
			onchange(e) {
				console.log(e)
				this.cate_id = e.detail.value[1].value
				this.cate = e.detail.value[1].text
				this.reload()
			},
			getType() {
				uni.$u.http.post('/getcitycate ', {}).then(res => {
					if (res.code == 1) {
						this.items = res.datas
					}
				}).catch((res) => {

				})
			},
			reload() {
				this.finish = false
				this.page = 1
				this.list = []
				this.getList()
			},
			getList() {
				if (this.finish) {
					return
				}
				let data = {
					city: this.city,
					lng: this.longitude,
					lat: this.latitude,
					page: this.page,
					equiptype: 1
				}
				if (this.type === 2) {
					data.simple = 1
				}
				if (this.type === 3) {
					data.high = 1
				}
				if (this.type === 1) {
					data.cate_id = this.cate_id
				}
				uni.$u.http.post('/Task ', data).then(res => {
					this.second = true
					if (res.code == 1) {
						res.data.cateList.unshift({
							name: '全部分类',
							id: ''
						})
						this.cateList = [res.data.cateList]
						this.list = this.list.concat(res.data.list)
						if (res.data.list.length === 0) {
							this.finish = true
						}
					}
				}).catch((res) => {

				})
			},
			getConfig() {
				uni.$u.http.post('/thumb', {
					type: 1,
					// #ifdef APP
					pro_type: 1,
					// #endif
					// #ifdef MP-WEIXIN
					pro_type: 0
					// #endif
				}).then(res => {
					if (res.code == 1) {
						this.info = res.data.map((value) => {
							return {
								image: this.oss(value.image),
								id: value.id,
								url: value.url,
								url_type: value.url_type
							}
						})

					}
				}).catch((res) => {

				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.content {
		background: linear-gradient(to bottom, #FFDF41, #F6F6F6);
		background-size: 750rpx 500rpx;
		background-repeat: no-repeat;
		height: 100vh;
		display: flex;
		flex-direction: column;

		.tabs {
			margin-bottom: 30rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-around;


			.tab:last-child {
				/* #ifdef MP-WEIXIN */
				padding-right: 220rpx;
				/* #endif */
			}
		}

		.a {
			font-weight: bold;
		}

		.header {

			.headBox {
				width: 700rpx;
				box-sizing: border-box;
				border-radius: 10rpx;
				background: #fff;
				margin: 0 auto;
			}

			.subBox {
				margin: 0 auto;
				border-radius: 10rpx 10rpx 0 0;
				display: flex;
				padding-bottom: 20rpx;

				align-items: center;
				justify-content: center;
				border-bottom: 1px solid #FFDF41;

				.sub {
					flex: 1;
					color: #999;
					text-align: center;
					height: 88rpx;
					line-height: 88rpx;
				}

				.active {
					color: #333;
					font-weight: bold;
					position: relative;
				}

				.active:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translate(-50%, 0);
					width: 40rpx;
					height: 4rpx;
					background: #FF2442;
					border-radius: 2rpx;
				}
			}
		}

		.main {
			flex: 1;
			overflow: hidden;
		}

		.searchBox {
			display: flex;
			align-items: center;
			padding: 0 20rpx 10rpx;

			.l {
				color: #191615;
				font-size: 35rpx;
				margin-right: 20rpx;
				font-weight: bold;
			}

			.r {
				background-color: #fff;
				height: 66rpx;
				flex: 1;
				border-radius: 33rpx;
				display: flex;
				align-items: center;
				padding: 0 4rpx 0 20rpx;

				.word {
					flex: 1;
					color: #999999;
					font-size: 24rpx;
					margin-left: 10rpx;
				}

				.btn {
					background: linear-gradient(to bottom, #FFDF41, #FFC141);
					width: 100rpx;
					height: 56rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #191615;
					font-size: 26rpx;
					border-radius: 28rpx;
				}
			}
		}

		.swiperBox {
			padding: 20rpx;
		}

		.navBox {
			width: 100%;
			overflow: hidden;
			display: flex;

		}

		.navMain {
			display: flex;
			align-items: center;
			flex-direction: row;
			padding: 20rpx 0 20rpx 20rpx;

			.nav {
				height: 60rpx;
				border-radius: 10rpx;
				padding: 0 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #fff;
				margin-right: 20rpx;
				flex-shrink: 0;
				font-size: 25rpx;
			}

			.active {
				background: linear-gradient(to right, #FFDF41, #FFC141);
			}
		}

		.selectBox {
			display: flex;
			align-items: center;
			padding: 20rpx 0;

			.select {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #575859;
				font-size: 25rpx;
			}

			.active {
				color: #FF8007;
			}
		}

		.list {
			display: flex;
			margin: 10rpx 20rpx;
			padding: 20rpx;
			background-color: #fff;
			border-radius: 10rpx;
			align-items: center;
			position: relative;

			.vip {
				position: absolute;
				left: 0;
				top: 40rpx;
				width: 74rpx;
				height: 44rpx;

				.icon {
					width: 74rpx;
					height: 44rpx;
				}

				.word {
					width: 74rpx;
					height: 44rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #191615;
					font-size: 20rpx;
					position: absolute;
					left: 0;
					top: -10rpx;
					font-weight: bold;
				}
			}

			.cover {
				width: 140rpx;
				height: 140rpx;
				margin-right: 20rpx;
				flex-direction: 0;
				border-radius: 10rpx;
				flex-shrink: 0;
			}

			.address {
				font-size: 25rpx;
				color: #575859;
			}

			.moeny {
				font-size: 30rpx;
				color: #FF5B1A;
				margin-left: 40rpx;
				flex-shrink: 0;
			}

			.info {
				flex: 1;
				overflow: hidden;

				.title {
					display: flex;
					align-items: center;

					.l {
						flex: 1;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						font-weight: bold;
					}

					.r {
						color: #428DFC;
						font-size: 24rpx;
						flex-shrink: 0;
						display: flex;
						align-items: center;
					}
				}

				.types {
					display: flex;
					align-items: center;
					margin: 20rpx 0;

					.btn {
						background: #FFFAE5;
						height: 36rpx;
						border-radius: 18rpx;
						padding: 0 10rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #FF8007;
						font-size: 24rpx;
						margin-right: 10rpx;
					}

					.btn1 {
						background-color: #E9F3FF;
						color: #428DFC;
					}
				}

				.numBox {
					display: flex;
					align-items: center;

					.num {
						display: flex;
						align-items: center;
						font-size: 22rpx;
						margin-left: 10rpx;

						.word {
							color: #428DFC;
						}
					}
				}
			}
		}

		.add {
			position: fixed;
			right: 30rpx;
			bottom: 100rpx;
			width: 120rpx;
			height: 120rpx;
		}
	}
</style>
